<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Awesome Reddit Spotify Extension!</title>
	<link rel="stylesheet" href="sp://import/css/adam.css">
	<link rel="stylesheet" href="sp://arse/css/trontastic/jquery-ui-1.8.20.custom.css">
	<script type="text/javascript" src="sp://arse/js/jquery.min.js"></script>
	<script type="text/javascript" src="sp://arse/js/mustache.js"></script>
	<script type="text/javascript" src="sp://arse/js/jquery.tablesorter.js"></script>
<style>

#caption {
    font-size: 180%;
    color: white;
    margin: 15px;
    width: 95%;
}
.ui-state-hover {
    font-weight: normal!important;
}
#refresh {
    font-size: 60%;
}
table {
    width: 95%;
    border-collapse: collapse;
}

th {
    text-align: left;
    
}
img:hover {
    cursor: pointer;
}
</style>
</head>
<body onload="sp = getSpotifyApi(1); arse = sp.require('arse'); arse.init();">
<script type="text/template" id="arseTable">
<div align=center>
<div id="caption">
    <span style="float:left;">(ARSE!) Awesome Reddit Spotify Extension</span>
    <span style="float:right;">
        <a href="#" id="search">Search</a>:
        <input type="text" id="search_val" value="{{search}}" />
    </span>
</div>
<table id="tableData">
    <thead>
        <tr>
            <th>Actions</th>        
            <th>Upvotes</th>
            <th>Downvotes</th>
            <th>Subreddit:User</th>
            <th>Description</th>
            <th>Date Created</th>
        </tr>
    </thead>
    <tbody>
    {{#data}}
        {{#children}}
            {{#data}}
        <tr class="posts">
            <td>
                <div id="actionBar">
                    <a href="{{uri}}"><img src="sp://arse/img/Details-Small.png" class="details" style="width:14px; height: 14px;" /></a>
                    <img src="sp://arse/img/Play-Small.png" id="{{uri}}" class="play" style="width:14px; height: 14px;" />
                    {{#num_comments}}
                        <img src="sp://arse/img/Comments-Small.png" uniq="{{uniq}}" href="{{permalink}}" class="comments" style="width:12px; height: 12px;" />
                    {{/num_comments}}
                </div>
            </td>
            <td>{{ups}}</td>
            <td>{{downs}}</td>
            <td>r/{{subreddit}}:{{author}}</td>
            <td class="title">{{description}}</td>
            <td>{{date}}</td>
        </tr>
            {{/data}}
        {{/children}}
    {{/data}}
    {{^data}}
        <tr>
            <td colspan=6>Fetching content from Reddit.com... please wait!</td>
        </tr>
    {{/data}}
    </tbody>
</table>
</div>
</script>
<script id="commentTable" type="text/template">
{{#data}}
        {{#children}}
            {{#data}}    
        <tr class="{{uniq}}">
            <td colspan=5><b>{{author}} said:</b><i> {{description}}</i></td>
            <td>{{date}}</td>
        </tr>
            {{/data}}
        {{/children}}
    {{/data}}
</script>
<div id="mainDiv"></div>
</body>
</html>